<template>
	<view id="wallet">
		<Header txt="我的钱包" v-if="baidu"></Header>
		<HeaderB txt="我的钱包" v-if="!baidu"></HeaderB>
		<view class="account_con">
			<view class="account_money">
				<text >账户余额（元）
				</text>
				<text @click="goPage2('user/rechargeDetail')" class="rechargeDetail">明细</text>
				<view class="nmoney">
					{{nmoney}}
					<view class="mony">
						<button type="default" @click="goPage2('user/walletPay')">去充值</button>
						<view class="deil">							
						</view>
					</view>			
				</view>
				<view class="text">
					<image src="" mode="aspectFit"></image>
					<view class="content">活动日（周一）还有额外奖励！</view>
				</view>
			</view>
		</view>
		<view class="img">
			<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/wallet2.png" mode="aspectFit"  @click="goPage2('user/invite')"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTop:false,
				baidu:true
			};
		},
		methods:{
			goPage2(e){
				uni.navigateTo({
					url: `/pagesA/${e}`
				})
			},
		},
		onShow(){
			// #ifdef MP-BAIDU
				this.isTop=true
				this.baidu=false
			// #endif
			console.log(this.userInfo);
		},
		computed:{
			userInfo() {
			      return this.$store.state.userInfo;
			},
			nmoney() {
			      return this.$store.state.leftMoney;
			},
		}
	}
</script>

<style lang="less">
	#wallet{
		background: #f8f7fc;
		height: 100%;
		overflow: hidden;
		.account_con{
			height: 288rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 16rpx;
			background: url() no-repeat center center;
			background-size: cover;
			position: relative;
			overflow: hidden;
		}
		.account_money{
			    margin: 0.3rem;
			    height: 300rpx;
			    background-color: #fff;
			    border-radius: 16rpx;
			    margin-top: 40rpx;
				padding-top: 20rpx;
			.rechargeDetail{
				display: inline-block;
				width: 100rpx;
				height: 34rpx;
				margin-left: 10rpx;
				color: rgb(255, 136, 29);
				cursor: pointer;
				position: relative;
				z-index: 2;
			}
			.nmoney{
				.mony{
					float: right;
					position: relative;
				}
				.deil{
					position: absolute;
					background: url() no-repeat center center;
					top: -80rpx;
					right: 10rpx;
					background-size: cover;
					width: 100%;
					height: 50rpx;
				}
				button::after{
					border:none;
				}
				button{
					width: 34%;
					background-color: rgb(255, 255, 255);
					color: rgb(255, 136, 29);
					border: none;
					border: 2rpx solid #ff7800;
					width: 140rpx;
					height: 56rpx;
					font-size: 26rpx;
					line-height: 56rpx;
					margin-top: 0;
					margin-right: 20rpx;
					border-radius: 100rpx;
				}
			}
			view{
				color: #222222;
				font-size: 38rpx;
				font-weight: bold;
				margin-top: 19rpx;
				margin-left: 40rpx;
			}			
			text{
				color: #666666;
				font-size: 26rpx;
				margin-left: 40rpx;
			}
			.text{
				height: 40rpx;
				margin-top: 60rpx;
				image{
					width: 30rpx;
					height: 40rpx;
				}
				.content{
					display: inline-block;
					color: #222222;
					font-size: 24rpx;
					margin: 0;
					height: 40rpx;
					vertical-align: middle;
					margin-top: -8rpx;
					margin-left: 20rpx;
				}
			}
			
		}
		.img{
			padding: 40rpx 30rpx;
			image{
				height: 127rpx;
				width: 100%;
			}
		}
	}
</style>
